import React from 'react'
import { SchemaForm, Item } from '@amazebird/antd-schema-form'
import { DeleteOutlined, ArrowUpOutlined, ArrowDownOutlined, PlusOutlined } from '@ant-design/icons'
import { Button, Row, Col } from 'antd'

const ARRAY_KEY = 'arrayField'

const style: React.CSSProperties = {
  display: 'inline-block',
  width: 30,
  lineHeight: '30px',
  textAlign: 'center'
}

function getColum(schema) {
  if (schema.fields) {
    return Object.keys(schema.fields)
  }
  return [undefined]
}

function DelButton({ remove, index }) {
  return (
    <div onClick={() => remove(index)} style={style}>
      <DeleteOutlined />
    </div>
  )
}

function UpButton({ move, index }) {
  function moveUp() {
    if (index > 0) {
      move(index, index - 1)
    }
  }

  return (
    <div onClick={moveUp} style={style}>
      <ArrowUpOutlined />
    </div>
  )
}

function DownButton({ move, index, fields }) {
  function moveDown() {
    if (index < fields.length - 1) {
      move(index, index + 1)
    }
  }
  return (
    <div onClick={moveDown} style={style}>
      <ArrowDownOutlined />
    </div>
  )
}

function AddButton({ add, index }: any) {
  return (
    <Button onClick={() => add(index)} type="dashed" block>
      <PlusOutlined /> 添加一行数据
    </Button>
  )
}

function FormWrapper(Component: any): any {
  return (props) => {
    const form = SchemaForm.createForm()
    return <Component {...props} form={form} />
  }
}

export interface ArrayItemProps {
  onChange: (value: any) => void
  form: any
  columns: any
}

@FormWrapper
class ArrayItem extends React.Component<ArrayItemProps> {
  fieldKeys: string[] | undefined[] = []
  span: number | undefined = undefined
  schema: any = {}
  columNum: number = 0
  
  constructor(props) {
    super(props)
    console.info('props', props)
    const { value, form } = props
    form.setFieldsValue({ [ARRAY_KEY]: value })
    this.fieldKeys = getColum(props.schema)
    const columNum = this.fieldKeys.length + 1
    this.span = Math.floor(24 / columNum)
    this.state = {}
    this.schema = {
      [ARRAY_KEY]: {
        type: 'array',
        item: props.schema
      }
    }
  }

  static getDerivedStateFromProps(nextProps, state) {
    const { value: newValue, form } = nextProps
    const { value: oldValue } = state
    return state
  }

  onChange = (changeValue, values = {}) => {
    const value = values[ARRAY_KEY]
    this.setState({ value })
    this.props.onChange && this.props.onChange(value)
  }

  render() {
    const { fieldKeys, columNum, schema } = this
    const { form, columns } = this.props
    console.info(fieldKeys, columNum, schema)
    return (
      <SchemaForm
        schema={schema}
        form={form}
        // TODO: 以下两个属性需看下作用，判断是否补充类型
        // component={false}
        // onValuesChange={this.onChange}
      >
        <Item field={ARRAY_KEY}>
          {(fields, { add, remove, move }, { errors }) => {
            console.info('fields', fields)

            return (
              <>
                <div style={{ display: 'flex', alignItems: 'baseline', maxWidth: '100%', lineHeight: '35px', height: 45 }}>
                  <Row gutter={24} style={{ flex: 1, margin: 0 }}>
                    {
                      columns.map(({ label, span }) => {
                        return (
                          <Col span={span} key={label} style={{ fontWeight: 'bolder' }} >
                            <label style={{ marginLeft: 5 }}>{label}</label>
                          </Col>
                        )
                      })
                    }
                  </Row>
                  <div style={{ display: 'inline', width: 90 }} />
                </div>
                {fields.map((field, index) => {
                  const { key, ...restField } = field
                  return (
                    <Item {...field} wrapperCol={{ span: 24 }} style={{ maxWidth: '100%', marginBottom: 0 }} key={key}>
                      <div style={{ display: 'flex', alignItems: 'baseline', maxWidth: '100%' }} key={key}>
                        <Row gutter={24} style={{ flex: 1, margin: 0 }}>
                          {
                            fieldKeys.map((key, index) => {
                              const { span } = columns[index]
                              return (
                                <Col span={span} key={key}>
                                  <Item field={key} {...restField} />
                                </Col>
                              )
                            })
                          }
                        </Row>
                        <div style={{ display: 'inline', width: 90 }}>
                          <DelButton remove={remove} index={index} />
                          <UpButton move={move} index={index} />
                          <DownButton move={move} index={index} fields={fields} />
                        </div>
                      </div>
                    </Item>
                  )
                })}
                <AddButton add={add} fields={fields} />
              </>
            )
          }}
        </Item>
      </SchemaForm>
    )
  }
}

export default ArrayItem
